<template>
	<view class="">
		<Header title="我的学习" :isHome="true" :isWhite='true'></Header>
		<view class="screen">
			<view class="screenTitle">
				筛选时间
			</view>
			<view class="screenCon">
				<view class="chooseTime" :class="{'chooseTime-active': startTime!='开始时间'}" @click="showStart=true">
					{{startTime}}
				</view>
				<view class="center">
					至
				</view>
				<view class="chooseTime" :class="{'chooseTime-active': endTime!='结束时间'}" @click="showEnd=true">
					{{endTime}}
				</view>
			</view>
		</view>
		<view class="flex">
			<view class="discipline-detail" :class="{ 'discipline-detail-active': activeIndex === item.id }"
				v-for="(item,index) in discipline" :key="index" @click="changeTab(item.id)">
				{{item.name}}
			</view>
		</view>

		<view class="training" v-for="(item,index) in aslist" :key="index">
			<view class="training-top">
				<view class="training-left">
					<view class="training-leftTitle">
						{{item.paper_title}}
					</view>
					<view class="training-leftTime">
						<span>创建时间：</span>
						<span>{{ formatDate(item.createtime) }}</span>
					</view>
				</view>
				<view class="detail" @click="goPage(item)">
					详情
				</view>
			</view>
			<view class="">
				<view class="totalNum">
					<view class="total">
						<view class="totalNumTitle">
							答对
						</view>
						<view class="totalNumCon">
							{{item.correct_num}}题
						</view>
					</view>
					<view class="line">

					</view>
					<view class="total">
						<view class="totalNumTitle">
							答错
						</view>
						<view class="totalNumCon" style="color: #F54040;">
							{{item.error_num}}题
						</view>
					</view>
					<view class="line">

					</view>
					<view class="total">
						<view class="totalNumTitle">
							总分
						</view>
						<view class="totalNumCon">
							{{item.total_score}}分
						</view>
					</view>
					<view class="line">

					</view>
					<view class="total">
						<view class="totalNumTitle">
							得分
						</view>
						<view class="totalNumCon" style="color: #F54040;">
							{{item.obtain_score}}分
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nomore">
			没有更多了
		</view>
		<view class="bottom">
			<view class="submitBtn" @click="showCou=true">
				获取个性化学习计划
			</view>

		</view>

		<!-- 时间选择 -->
		<view>
			<u-datetime-picker :show="showStart" v-model="value1" mode="date" confirmColor='#222'
				@close="showStart=false" @cancel="cancel" @confirm="confirm"></u-datetime-picker>
		</view>
		<view>
			<u-datetime-picker :show="showEnd" v-model="value2" closeOnClickOverlay="true" mode="date"
				confirmColor='#222' @cancel="cancel" @close="showEnd=false" @confirm="confirm"></u-datetime-picker>
		</view>

		<!-- 学习顾问 -->
		<view>
			<u-popup :show="showCou" :round="12" mode="center" @close="close" @open="open">
				<view class="popContent">
					<view class="title">学习顾问</view>
					<view class="">
						<image :src="imgUrl+qrcode" mode="" class="qr" @click="handleLook(imgUrl+qrcode)"
							:show-menu-by-longpress="true"></image>
					</view>
					<view class="popCon">
						长按微信二维码
					</view>
					<view class="popCon">
						学习顾问将为您的学习提供服务
					</view>
					<image src="/static/close.png" mode="" class="close" @click="showCou=false"></image>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				imgUrl: img_url,
				qrcode:'',
				showStart: false,
				showEnd: false,
				showCou: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				subText: '',
				startTime: '开始时间',
				endTime: '结束时间',
				activeIndex: 1,
				aslist: [],
				discipline: [{
					id: 1,
					name: '同步练',
				}, {
					id: 4,
					name: '单元测验',
				}],
				trainingList: [{
						title: '快整训练',
						createTime: '2024/10/22',
						rightNum: '7',
						wrongNum: '3',
						totalMark: '100',
						score: '70'
					},
					{
						title: '快速检测',
						createTime: '2024/10/22',
						rightNum: '7',
						wrongNum: '3',
						totalMark: '100',
						score: '70'
					},
					{
						title: '快整训练',
						createTime: '2024/10/22',
						rightNum: '7',
						wrongNum: '3',
						totalMark: '100',
						score: '70'
					},
					{
						title: '快速检测',
						createTime: '2024/10/22',
						rightNum: '7',
						wrongNum: '3',
						totalMark: '100',
						score: '70'
					}
				]
			}
		},
		onLoad(opt) {
			this.subText = opt.subText
			this.getAslist()
			this.getQrcode()
		},
		methods: {
			getAslist() {
				var start_time = ""
				var end_time = ""
				if (this.startTime != '开始时间') {
					start_time = this.startTime
				}
				if (this.endTime != '结束时间') {
					end_time = this.endTime
				}
				get('/answer_statistics/aslists?sub_text=' + this.subText + '&module_id=' + this.activeIndex +
						'&start_time=' + start_time + '&end_time=' + end_time)
					.then(res => {
						if (res.code == 1) {
							this.aslist = res.data.data
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			confirm(e) {
				console.log(e, 'eee');
				const selectedDate = e.value;
				const date = new Date(selectedDate);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				if (this.showStart) {
					this.startTime = `${year}/${month}/${day}`;
					this.showStart = false;
				} else {
					this.endTime = `${year}/${month}/${day}`;
					this.showEnd = false;
				}
				this.getAslist()
			},
			cancel() {
				this.showEnd = false
				this.showStart = false
				this.startTime = '开始时间'
				this.endTime = '结束时间'
			},
			changeTab(index) {
				console.log(index);
				this.activeIndex = index
				this.getAslist()
			},
			getQrcode() {
				get('/system/get_contact')
					.then(res => {
						this.qrcode = res.data.qrcode
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			previewImg(e) {
				console.log(e, 'eee');
				uni.previewImage({
					urls: [],
					current: '/static/qr.png',
					indicator: 'default',
					loop: false,
					// longPressActions: {
					// 	itemList: [this.l('发送给朋友'), this.l]
					// },
					success: res => {
						console.log(res, 'qqqq');
					},
					fail: err => {
						console.log(err, '111');
					},
				})
			},
			goPage(item) {
				if (this.activeIndex == 1) {
					uni.navigateTo({
						url: '/subpages/banner/practiceResult?id=' + item.id + '&paperId=' + item.paper_id
					})
				} else if (this.activeIndex == 4) {
					uni.navigateTo({
						url: '/subpages/banner/testResult?id=' + item.id + '&paperId=' + item.paper_id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.screen {
		background: #fff;
		padding: 32rpx;
		position: sticky;

		.screenTitle {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 30rpx;
			color: #222222;
			margin-bottom: 24rpx;
		}

		.screenCon {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;

			.chooseTime {
				width: 309rpx;
				height: 80rpx;
				border: 3rpx solid #1A1A1A;
				border-radius: 12rpx;
				text-align: center;
				line-height: 80rpx;
				color: #CCCCCC;
			}

			.chooseTime-active {
				width: 309rpx;
				height: 80rpx;
				border: 3rpx solid #1A1A1A;
				border-radius: 12rpx;
				text-align: center;
				line-height: 80rpx;
				color: #222;
			}
		}
	}

	.flex {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 316rpx;
		height: 64rpx;
		border: 3rpx solid #1A1A1A;
		border-radius: 12rpx;
		margin: 0 auto;

		.discipline-detail {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #222222;
			width: 110rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
		}

		.discipline-detail-active {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			padding: 0 10rpx;
			font-size: 26rpx;
			color: #fff;
			background: url(/static/active-bg.png) no-repeat center center / 100% 100%;
		}

	}

	.totalNum {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 50rpx;
		background-color: #fff;
		position: sticky;
		margin: 28rpx 0;

		.total {
			text-align: center;
		}

		.line {
			width: 1rpx;
			height: 60rpx;
			background-color: #f5f5f5;
		}

		.totalNumTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}

		.totalNumCon {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #222222;
			margin-top: 5rpx;
		}
	}


	.training {
		width: 630rpx;
		background: #F0F0F0;
		border: 3rpx solid #DDDDDD;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 28rpx;
		margin: 20rpx auto;

		.training-top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.training-leftTitle {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
			}

			.training-leftTime {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}

			.detail {
				width: 120rpx;
				height: 48rpx;
				border: 2rpx solid #1A1A1A;
				border-radius: 6rpx;
				text-align: center;
				line-height: 48rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;
			}
		}
	}

	.training {
		width: 630rpx;
		background: #F0F0F0;
		border: 3rpx solid #DDDDDD;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 28rpx;
		margin: 20rpx auto;

		.training-top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.training-leftTitle {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
			}

			.training-leftTime {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}

			.detail {
				width: 120rpx;
				height: 48rpx;
				border: 2rpx solid #1A1A1A;
				border-radius: 6rpx;
				text-align: center;
				line-height: 48rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 22rpx;
				color: #222222;
			}
		}
	}

	.nomore {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin-bottom: 300rpx;
		margin-top: 20rpx;
	}

	.bottom {
		position: fixed;
		width: 100%;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 670rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 35rpx auto;
		}

	}

	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 400rpx;
			height: 400rpx;
		}

		.allBtn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			view {
				width: 239rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.fanhui {
				margin-right: 20rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
			}

			.continue {
				background: #FFD275;
			}
		}
	}
</style>